{% extends 'knowledge/base.html' %}

{% block title %}知识库列表 - 知识库管理系统{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
    <div>
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">知识库集合</h2>
        <p class="text-neutral mt-1">管理您的知识库集合和文档内容</p>
    </div>
    <div class="mt-4 md:mt-0">
        <a href="{% url 'knowledge:create_collection' %}" class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm">
            <i class="fa fa-plus-circle mr-2"></i>创建新集合
        </a>
    </div>
</div>

{% if collections %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    {% for collection in collections %}
    <div class="bg-white rounded-xl overflow-hidden card-shadow hover:shadow-md transition-shadow duration-300">
        <div class="p-6">
            <div class="flex justify-between items-start mb-4">
                <h3 class="text-lg font-semibold text-gray-800 truncate">{{ collection }}</h3>
                <div class="relative group">
                    <button class="text-neutral hover:text-gray-700 p-1 rounded-full hover:bg-gray-100">
                        <i class="fa fa-ellipsis-v"></i>
                    </button>
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 z-10 hidden group-hover:block">
                        <a href="{% url 'knowledge:delete_collection' collection %}" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                            <i class="fa fa-trash-o mr-2"></i>删除集合
                        </a>
                    </div>
                </div>
            </div>
            <p class="text-neutral text-sm mb-4">管理此集合中的文档和元数据</p>
            <div class="flex justify-between items-center">
                <a href="{% url 'knowledge:collection_detail' collection %}" class="text-primary hover:text-primary/80 text-sm font-medium">
                    查看文档 <i class="fa fa-arrow-right ml-1"></i>
                </a>
                <span class="text-xs bg-neutral-light text-neutral-dark px-2 py-1 rounded-full">
                    文档: <span class="font-medium">--</span>
                </span>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="bg-white rounded-xl p-8 text-center card-shadow">
    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
        <i class="fa fa-folder-open text-primary text-2xl"></i>
    </div>
    <h3 class="text-lg font-semibold text-gray-800 mb-2">暂无知识库集合</h3>
    <p class="text-neutral mb-6 max-w-md mx-auto">您还没有创建任何知识库集合，点击下方按钮开始创建您的第一个知识库</p>
    <a href="{% url 'knowledge:create_collection' %}" class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-sm">
        <i class="fa fa-plus-circle mr-2"></i>创建第一个集合
    </a>
</div>
{% endif %}
{% endblock %}